<template>
  <view class="page">
    <!-- <view class="filter-btn" >
      <uni-search-bar
        v-model="keyword"
        :radius="100"
        cancelButton="none"
        class="search-bar"
      />
    </view> -->
    <scroll-view class="record-box" scroll-y="true" ref="dataList" lower-threshold="50" @scrolltolower="pageHandler">
      <view class="record-main">
        <view class="record" v-for="(item,index) in recordList" :key="index" @click="goDetail(item)">
          <view class="record-item">
            <view class="record-item-title">{{item.supervisionName || '--'}}</view>
            <view class="record-item-desc">
              <view class="text-item">督导员：{{ item.stagnationPointName  || '--'}}</view>
              <view class="text-item">督导时间：{{ item.supervisionTime  || '--'}}</view>
            </view>
          </view>
          <!-- <view class="record-icon">
            <image src="https://szgd-dev.tgovcloud.com/public/images/infectPrevention/finished.png" class="icon-finish" />
            <view class="unfinish">
              <image src="https://szgd-dev.tgovcloud.com/public/images/infectPrevention/icon2.png" class="icon-unfinish" />
              <text>部分未落实</text>
            </view>
            <view class="btn-primary">查看详情</view>
          </view> -->
        </view>
        <view class="no-more">{{ dataText }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import { getSupervisionList } from '@/api';

export default {
  data() {
    return {
      dayjs,
      recordList: [],
      pageNum: 0,
      pageSize: 10,
      dataText: '暂无数据',
      finished: true,
    }
  },
  onLoad() {
    uni.showLoading();
    this.getList();
  },
  methods: {
    pageHandler() {
      if (!this.finished) {
        this.pageNum ++;
        this.getList();
      }
    },
    getList() {
      const personInfo = uni.getStorageSync('personalInfo');
      const data = {
        pageNum: this.pageNum,
        size: this.pageSize,
        hotelId: personInfo.isolationId
      };
      getSupervisionList(data).then((res) => {
        if(res.records) {
          this.recordList = [...this.recordList, ...res.records];
          this.total = res.total;
          if(this.recordList.length === this.total) {
            this.finished = true;
          }
          if (this.total) {
            this.dataText = this.finished ? '没有更多数据' : '加载更多';
          }
        }
        uni.hideLoading();
      });
    },
    goDetail(row) {
      uni.navigateTo({
        url: `detail?id=${row.supervisionId}`,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.record-box {
  flex: 1;
  background-color: #f9f9f9;
  overflow-y: scroll;
}
.record-main{
  padding:30rpx 32rpx;
  box-sizing: border-box;
  .record{
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding:26rpx 32rpx;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    font-size: 30rpx;
    &-item{
      flex: 1;
      &-title{
        color: #333;
        font-size: 36rpx;
        line-height: 46rpx;
        margin-bottom: 20rpx;
      }
      &-desc{
        color: #666;
        font-size: 34rpx;
        line-height: 50rpx;
      }
    }
    .text-item {
      margin-right: 40rpx;
      &:last-child {
        margin-right: none;
      }
    }
  }
  .record-icon {
    text-align: center;
    .icon-finish {
      width: 172rpx;
      height: 172rpx;
    }
    .icon-unfinish {
      width: 30rpx;
      height: 30rpx;
    }
    .btn-primary {
      background-color: #2C9AF1;
      color: #fff;
      font-size: 30rpx;
      border-radius: 5rpx;
      width: 180rpx;
      text-align: center;
      line-height: 60rpx;
    }
    .unfinish {
      color: #F15B53;
      line-height: 30rpx;
      text-align: center;
      margin-bottom: 30rpx;
      image, text {
        vertical-align: middle;
      }
      image {
        margin-right: 10rpx;
      }
    }
  }
  .no-more{
    color: #999999;
    font-size: 30rpx;
    margin: 20rpx 0;
    text-align: center;
    height: 80rpx;
  }
}
.search-bar {
  /deep/ .uni-searchbar__box {
    border-color: transparent;
    height: 30px;
  }
}
</style>